<template>
  <div>
    <!-- 个人信息 -->
    <div class="person-info">
      <div style="height:80px;display:flex;">
        <div class="person-info-left">
          <p>
            <img src="../../assets/images/person.png" width="75px" alt />
          </p>
          <h3 class="mleft15">{{this.$token.getUUID().replace(this.$token.getUUID().slice(3,7),"****")}}</h3>
          <p class="mleft15 changePwd">
            <Icon type="ios-create-outline" size="20" />
            <router-link tag="span" to="/personalCenterChangePassword" class="cursor-point" style="margin-left:5px">修改密码</router-link>
          </p>
        </div>
        <p class="special-line"></p>
        <div class="person-info-right">
          <div class="person-info-right-piece">
            <p>
              <img src="../../assets/images/成功放款.png" width="35px" alt />
              <b style="color:#00A573;">{{personInfo.loanCount}}</b>
              <span>笔</span>
            </p>
            <p class="desc">成功放款</p>
          </div>
          <div class="person-info-right-piece" style="padding-right:40px;">
            <p>
              <img src="../../assets/images/放款金额.png" width="35px" alt />
              <b style="color:#333333;">{{personInfo.loanAmt}}</b>
              <span>万元</span>
            </p>
            <p class="desc">放款金额</p>
          </div>
        </div>
      </div>
      <div class="person-info-piece">
        <router-link tag="p" to="/personalCenterMyApplication" class="cursor-point">
          <img src="../../assets/images/发布融资需求.png" width="30px" alt />
          <span>发布融资需求</span>
        </router-link>
        <router-link tag="p" to="/personalCenterCompanyInformation" class="cursor-point">
          <img src="../../assets/images/添加企业.png" width="30px" alt />
          <span>添加企业</span>
        </router-link>
        <router-link tag="p" to="/personalCenterMyApplication" class="cursor-point">
          <img src="../../assets/images/申请记录.png" width="30px" alt />
          <span>申请记录（{{personInfo.userApplyCount}}次）</span>
        </router-link>
        <router-link tag="p" to="/personalCenterCompanyInformation" class="cursor-point">
          <img src="../../assets/images/注册企业.png" width="30px" alt />
          <span>注册企业（{{personInfo.entCount}}家）</span>
        </router-link>
      </div>
    </div>
    <!-- 我的上链数据 -->
    <div class="upper-chain">
      <h3 class="upper-chain-title">
        我的上链数据
        <i>科技赋能金融区块链为您的隐私保驾护航</i>
      </h3>
      <div class="upper-chain-content">
        <img src="../../assets/images/组 15.png" alt width="100px" />
        <p>敬请期待</p>
      </div>
    </div>
    <!-- 热门金融产品推荐 -->
    <div class="policy-info">
      <div class="info-first-line">
        <h3>热门金融产品推荐</h3>
        <!-- <span>查看更多》</span> -->
        <router-link tag="span" to="/financingProducts" class="cursor-point">查看更多》</router-link>
      </div>
      <div class="pro-list marginT20 cursor-point" v-for="item in proMsg" :key="item.productId">
        <p style="margin-bottom:10px;"><span class="specialText">{{item.productName}}</span> <span class="specialBackg">{{item.shortName}}</span></p>
        <Row>
            <i-col span='4' offset='1'>
                <span><em>{{item.loanAmount}}</em>万</span>
            </i-col>
            <i-col span='4' offset='2'>
                <span class="interest-rate">{{item.loanPeriodDown}}%~{{item.loanPeriodUp}}%</span>
            </i-col> 
            <i-col span='4' offset='2'>
                <span>最高<em>{{item.loanPeriodDown}}</em>年</span>
            </i-col> 
            <i-col span='4' offset='2' style="margin-top:8px">
                <Button type="success" @click="hotProductHandler(item)">立即前往</Button>
            </i-col> 
        </Row>
        <Row>
            <i-col span='4' offset='1'>
                <span>最高贷款额度</span>
            </i-col>
            <i-col span='4' offset='2'>
                <span>贷款利率</span>
            </i-col> 
            <i-col span='4' offset='2'>
                <span>贷款期限</span>
            </i-col> 
        </Row>
      </div>
    </div>
    <!-- 政策咨讯 -->
    <div class="policy-info">
      <div class="info-first-line">
        <h3>政策咨讯</h3>
        <!-- <span>查看更多》</span> -->
        <router-link tag="span" to="/infoList" class="cursor-point">查看更多》</router-link>
      </div>
      <div class="info-content">
        <div class="info-content-piece" v-for="(item,index) in policyInfo" :key="index">
          <div class="relative-tip">
            <p>2020</p>
            <p>04-27</p>
          </div>
          <div class="piece-content">
            <h3>{{item.title}}</h3>
            <p>{{item.contetn}}</p>
            <p class="details">
              <span class="cursor-point" @click="goPolicyDetail(item)">详情》</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "home",
  data() {
    return {
      personInfo:{},
      policyInfo:[],
      proMsg:[]
    };
  },
  mounted(){
    this.$axios('getStatistic',[],{userPhone:this.$token.getUUID}).then(res=>{
      if(res.code == 200){
        this.personInfo = res.data;
      }
    });
    let policyObj = {
      newsType:0,
      proCode: window.areaArr[0]?window.areaArr[0]:"",
      cityCode: window.areaArr[1]?window.areaArr[1]:"",
      countyCode:  window.areaArr[2]?window.areaArr[2]:"",
    }
    this.$axios('getpolicyInfoList',[1,2],policyObj).then(res=>{
      if(res.code == 200){
        this.policyInfo = res.data.result;
      }
    });
    this.$axios('getHotProducts',[],{areaCode:"130100",level:1}).then(res=>{
        if(res.code == 200){
          this.proMsg = res.data.hotProductList; 
        }
      })
  },
  methods:{
    hotProductHandler(data){
      this.$router.push({
          path:'/financingProductsDetails',
          query:{
              productId:data.productId
          }
      })
    },
    goPolicyDetail(data){
      this.$router.push({
          path:'/infoDetails',
          query:{
              infoId:data.id
          }
      })
    }
  }
};
</script>

<style scoped>
.person-info {
  width: 100%;
  background: #fff;
  padding: 20px 30px;
}
.person-info-left,
.special-line,
.person-info-right {
  display: inline-block;
}
.person-info-left,
.person-info-right {
  width: 49%;
  margin-left: 10px;
}
.special-line {
  width: 1px;
  height: 60px;
  background: #ececec;
  margin-top: 10px;
}
.person-info-left p,
.person-info-left h3 {
  display: inline-block;
}
.person-info-left h3 {
  color: #333333;
  font-size: 20px;
  font-weight: bold;
}
.person-info-left h3,
.person-info-left .changePwd {
  position: relative;
  top: -30px;
}
.person-info-right {
  display: flex;
  justify-content: space-between;
  color: #666666;
}
.person-info-right-piece {
  display: inline-block;
  margin-left: 30px;
}
.person-info-right-piece img {
  position: relative;
  top: 5px;
}
.person-info-right-piece b {
  font-size: 30px;
  margin-left: 10px;
  margin-right: 10px;
}
.person-info-piece {
  padding: 0 20px;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
.person-info-piece span {
  margin-left: 10px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  position: relative;
  top: -10px;
}
.desc {
  margin-left: 50px;
}
/* 我的上链 */
.upper-chain {
  margin-top: 10px;
  background: #fff;
  padding: 20px 30px;
}
.upper-chain-title {
  height: 30px;
  line-height: 30px;
}
.upper-chain-title i {
  margin-left: 20px;
  font-family: Source Han Sans CN;
  font-weight: 600;
  font-style: italic;
  color: rgba(0, 165, 115, 1);
}
.upper-chain-content {
  width: 100px;
  margin: 0 auto;
}
.upper-chain-content img {
  margin-top: 30px;
}
.upper-chain-content p {
  text-align: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
/* 政策咨询 */
.policy-info {
  margin-top: 10px;
  height: auto;
  background: #fff;
  padding: 10px 30px 30px 30px;
}
.info-first-line {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  border-bottom: 1px solid #e7e7e7;
}
.info-first-line h3 {
  color: #333333;
}
.info-first-line span {
  display: inline-block;
  color: #999999;
}
.info-content {
  position: relative;
}
.info-content-piece {
  width: 50%;
  display: inline-block;
  position: relative;
  margin-top: 30px;
}
.info-content-piece:nth-child(even) {
  right: 0;
}
.relative-tip {
  width: 100px;
  height: 65px;
  background: rgba(0, 165, 115, 1);
  color: #fff;
  font-size: 16px;
  padding: 10px 15px;
  position: absolute;
  top: 0px;
  left: 0px;
  font-weight: 600;
}
.piece-content {
  width: 90%;
  border: 1px solid #e7e7e7;
  padding: 20px;
  margin-left: 20px;
}
.piece-content h3 {
  margin-left: 70px;
}
.piece-content p {
  margin-top: 20px;
  line-height: 25px;
}
.piece-content .details {
  text-align: right;
  color: #00a573;
}
.specialText{
  color:#333333;
  font-size: 16px;
}
.specialBackg{
  display:inline-block;
  margin-left: 10px;
  height:24px;
  line-height: 24px;
  background:rgba(204,238,228,1);
  border-radius:4px;
  color:rgba(0,165,115,1);
  padding:1px 5px;
}

/* 热门金融产品推荐 */
.company-name{
    font-size: 24px;
    font-weight: 700;
}
.bank-desc{
    display: inline-block;
    padding: 1px;
    background:#ccc;
    color: #00A573;
    border-radius:5px;
    font-size: 12px;
    margin-left: 10px;
    margin-top: -5px;
}
.desc-msg{
    color: #999999;
    font-size: 15px;
}
.interest-rate{
    font-size: 27px;
    font-weight: 700;
    color: #FF604F;
}
em{
    font-size: 27px;
    font-weight: 700;
}
</style>